<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" http-equiv="refresh" >
    <title>我的</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body{
            margin: 0px;
        }
        #img1{
            width: 375px;
            height: 667px;
        }
        #show_img{
            width: 91px;
            height: 91px;
            border-radius: 50%;
        }
        #img3{
            width: 36px;
            height: 40px;
        }
        #desc{
            position: absolute;
            left: 83px;
            top: 130px;
            color: white;
        }
        #img4,#img5,#img6,#img7,#img8,#img9{
            width: 46px;
            height: 35px;
        }
        .context{
            width: 300px;

            height: 200px;

            display: flex;

            flex-direction: row;

            flex-wrap: nowrap;

            justify-content: space-between;
        }
        input{
            border:1px solid #7e86ec;
            outline: none;
            width:78px;
            height:28px;
        }
    </style>
    <script>
        if (! localStorage.getItem('username')) {
            alert('请先登录')
            location.href = './login.html'
        }
    </script>
</head>
<body>
<div style="position:relative;">
    <img id="img1" src="./img/mine/img1.png" width="500" height="500" />
<!--    <div style="position:absolute; left:142px; top:58px;">-->
<!--        <img id="img2" src="./img/mine/img2.png"/>-->
<!--        <img id="show_img"  style="display: none;width: 80px;height: 80px" src="">-->
<!--    </div>-->
    <div class="layui-form-item" style="position:absolute; left:142px; top:58px;  display: inline-block">
        <div class="layui-input-inline"    style="margin-left: 10px;" >
            <img id="show_img"  style="display: none;width: 80px;height: 80px" src="">
        </div>
    </div>
    <div style="position:absolute; left:321px; top:15px;">
<!--        <img id="img3" src="./img/mine/img3.png"/>-->
        <a id="jump" ><img id="img3" src="./img/mine/img3.png"> </a>
    </div>
    <div id="desc" >
        <p id="username"></p>
    </div>
    <div class="context" style="position:absolute; left:36px; top:378px;">
        <div class="list">
            <a href="card.html"><img  src="./img/mine/img4.png" width="56px" height="56px"> </a>
            <p>我的水卡</p>
        </div>
        <div class="list">
            <a href="information.html"><img  src="./img/mine/img5.png" width="56px" height="56px"> </a>
            <p>个人信息</p>
        </div>
        <div class="list">
            <img src="./img/mine/img6.png" width="56px" height="56px">
            <p>设备管理</p>
        </div>
    </div>
    <div class="context" style="position:absolute; left:36px; top:500px;">
        <div class="list">
            <a href="record.html"><img  src="./img/mine/img7.png" width="56px" height="56px"> </a>
            <p>打水记录</p>
        </div>
        <div class="list">
            <img src="./img/mine/img8.png" width="56px" height="56px">
            <p>水卡充值</p>
        </div>
        <div class="list">
            <img src="./img/mine/img9.png" width="56px" height="56px">
            <p>充值记录</p>
        </div>
    </div>
    <div style="position:absolute; left:111px; top:620px;">
        <input  style="background-color: white;color: #7e86ec" name="submit" type="submit" value="首页" onclick="window.location.href='./home.html'">
    </div>
    <div style="position:absolute; left:189px; top:620px;">
        <input  style="background-color: #7e86ec;color: white"  name="submit" type="submit" value="我的" onclick="window.location.href='./mine.html'">
    </div>
</div>
<script src="./api/app.js"></script>
<script src="./layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
    var id=localStorage.getItem("id");
    $('#jump').attr('href','./modify.php?id='+id);

    var icon = localStorage.getItem("icon");//取缓存
    img = document.getElementById('show_img');
    img.setAttribute('src',  './uploads/'+icon);
    img.style.display = 'inline-block';

    var username = localStorage.getItem("username");//取缓存
    var money=localStorage.getItem('money')
    p = document.getElementById('username');
    contents = '<p style="    font-size: x-large;\n' +
        '    margin-top: 20px;    margin-left: 20px;">' + '你好哇！' + username + '</p>'+
        '    <p style="margin-top: 3px;    margin-left: 50px;" >' + '卡内余额：' + money + '元</p>'
    p.innerHTML = contents;

    function mon() {
        var id=localStorage.getItem("id");
        $.ajax( {
            url: url+'api/money.php',
            type: 'POST',
            dataType:"json",
            // async:false,
            data: {
                id:id,
            },
            success: function (res){
                if(res.code==200){

                    console.log(res)
                    if(res.code==200){
                        var data=res.data
                        // var ls = document.getElementById('username')
                        var contents = '';
                        for (var j = 0; j < data.length; j ++) {
                            localStorage.setItem('money',data[j].money)
                        }
                        // ls.innerHTML = contents;
                    }

                }


                if(res.code<0){
                    showError(res.message)

                }
                console.log(res)
            },

            error : function (res) {
                console.log(res)
            }
        })
    }

    window.onload = function () {
       mon();
        // location.reload()
        // init();
        //js中进入页面后刷新一次，且只刷新一次
        if(location.href.indexOf("#reloaded")==-1){
            location.href=location.href+"#reloaded";
            location.reload();
        }
    }


    function doicon(icon) {
        var id = localStorage.getItem("id");
        $.ajax({
            url: 'http://localhost:8081/exec/healthyDrinkingWater/api/iconedit.php',
            type: 'POST',
            data: {
                icon: icon,
                id: id
            },
            dataType: "json",
            success: function (res) {
                if (res.code == 200) {


                }
                if (res.code < 0) {
                    showError(res.message)

                }
                console.log(res)
            },
            error: function (res) {
                console.log(res)
            }
        })

    }
    layui.use(['upload'], function () {
        var upload = layui.upload;

        var uploadInst = upload.render({
            elem: '#show_img' //绑定元素
            , url: './api/upload.php' //上传接口
            , field: 'pic'
            , done: function (res) {
                //上传完毕回调
                // console.log(res)
                path = res.data.path;
                img = document.getElementById('show_img');
                img.setAttribute('src', './uploads/' + path);
                // img.style.display = 'inline-block';


                localStorage.setItem('icon', path)
                doicon(path)

            }
            , error: function (res) {
                //请求异常回调
                console.log(res);
            }
        });
    });

</script>
</body>
</html>